【前言】
本系列為個人前端學習之路的學習筆記，在過往的學習過程中累積了很多筆記，如今想藉著IT邦幫忙這個平台做整理+再複習。
本系列標題一律以【】標示該篇文章主要涉及的內容，例如【JavaScript】、【Vue】等等。
若內容有誤，還麻煩各路大神不吝於點出問題，感激不敬。

<table>是很常用到的HTML標籤，一個<table>通常裡面還會有<tr>、<th>、<td>等HTML元素
如果我們對其使用開發者工具檢查，會發現<table>的display屬性會是display: table
而<td>的display屬性則是display: table-cell

相對於flex、block、inline.....等等，表格的display屬性相對來說比較少見，因此有時候會忘記其有些特別的特性
近期我就在此踩了些雷，因此才會撰寫這篇文

<td>的margin無效，padding有效

在使用一些框架，像是Bootstrap時，我自然的在<td>上加上class="mt-3 ps-3"，然而，這一點效果都沒有
範例：
https://codepen.io/linchinhsuan/pen/LYeQKJx
在此案例中可以發現，<td>的margin無效，padding有效

<tr>的margin無效，padding近於無效

換一個案例，這次我們在<tr>上加上class="mt-3 ps-3"
範例：
https://codepen.io/linchinhsuan/pen/GRyQbYQ
在此案例中可以發現，<tr>的margin無效
無法透過調整margin來讓表格橫列之間產生間距
至於padding，如果使用開發者工具來看，你會看到它確實出現了一個綠色的padding區塊
然而，你會看到內文直接蓋在padding區上，完全起不到padding該有的作用
因此<tr>的padding近於無效，或是想成無效就好

<table>的margin有效

最後是<table>本身
範例：
https://codepen.io/linchinhsuan/pen/KKZQjYj
基本上可以把<table>本身當作一個容器，因此margin很自然的產生作用了（恭喜，這是這篇文第一個成功使用的margin）
因此這裡可以開心的宣布<table>的margin有效

至於padding則會視情況而定，在這個案例中padding是無效的
但如果我們改變了<table>的border-collapse屬性
例如：
https://codepen.io/linchinhsuan/pen/LYeQwYj
設定border-collapse: separate;之後，padding就有效了
因此，<table>的padding會視情況有效，在border-collapse: collapse;時是無效的，因為這一行的意思就是讓表格每一格緊緊合併著，怎麼可能讓表格和裡面的格子產生padding呢

以上，就是今天的一點小分享
主要是最近在做專案的時候，在<td>上套用Bootstrap的mt-3，結果無論如何都沒反應
查了才知道原來是不起作用的，在此分享給大家